import React, { useEffect, useState, useContext } from 'react';
import { Drawer, Form, Button, Input, Select } from 'antd';
import { MemberContext } from '../index';
import { connect } from 'dva';

const { Option } = Select;

const theProps = (state) => {
  return {
    member: state.member.member,
    total: state.member.tatal
  }
}

function AddUserDrawer(props) {
  const member = useContext(MemberContext)
  const { dispatch } = props;

  const [form] = Form.useForm();
  const onClose = () => {
    member.setVisible(false)
  }
  const onFinish = (value) => {
    console.log(value);
    dispatch({
      type: 'member/addUser',
      payload: {
        realname: value.realname,
        username: value.username,
        role: value.role,
        password: value.password
      }
    })
  }
  const roleChange = (value) => {
  }
  return (
    <Drawer
      title="新增用户"
      width={'30em'}
      onClose={onClose}
      visible={member.visible}
      bodyStyle={{ paddingBottom: 80 }}
      footer={
        <div style={{ textAlign: 'right' }}>
        </div>
      }
    >
      <Form layout="vertical" onFinish={onFinish} hideRequiredMark>
        <Form.Item
          name="realname"
          label="姓名"
          rules={[{ required: true, message: '请输入姓名' }]}
        >
          <Input placeholder="realname" />
        </Form.Item>
        <Form.Item
          name="username"
          label="账号"
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input placeholder="username" />
        </Form.Item>
        <Form.Item
          name="role"
          label="角色"
          rules={[
            {
              required: true,
              message: '请选择角色'
            },
          ]}
        >
          <Select defaultValue={1} style={{ width: 120 }} onChange={roleChange}>
            <Option value={0}>普通用户</Option>
            <Option value={1}>普通管理员</Option>
            <Option value={2}>高级管理员</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input type='password' placeholder="password" />
        </Form.Item>
        <Form.Item style={{ textAlign: 'right' }} >
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </Drawer>
  )
}

export default connect(theProps, null)(AddUserDrawer)